<template>
    <span v-if="item">
        <el-form label-position="left" size="mini" label-width="80px" :model="item" ref="itemForm">
            <el-form-item v-if="true" label="类别">
                <el-select
                    placeholder="请选择"
                    clearable
                    :value="item.type"
                    @change="itemChange('type', $event)"
                >
                    <el-option
                        v-if="activedEditor !== 'apps'"
                        v-for="type in itemTypes"
                        :key="type.value"
                        :label="type.label"
                        :value="type.value"
                    ></el-option>
                    <el-option
                        v-if="activedEditor === 'apps'"
                        v-for="type in htmlTypes"
                        :key="type.value"
                        :label="type.label"
                        :value="type.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="名称">
                <el-select
                    :value="item.name"
                    filterable
                    clearable
                    allow-create
                    default-first-option
                    placeholder="选择或新增"
                    @change="itemChange('name', $event, item)"
                >
                    <el-option
                        v-for="opt in itemNamesOptions"
                        :key="`options_${opt}`"
                        :label="opt"
                        :value="opt"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="环节范围" v-if="activedEditor !== 'apps'">
                <el-input :value="item.scope" @input="itemChange('scope', $event)"></el-input>
            </el-form-item>
            <el-form-item label="凭证选择" v-if="item.type === 'desktopItem'">
                <evi-selector :content="item.content" @change="itemChange('content', $event)"/>
            </el-form-item>
            <el-form-item label="视频选择" v-if="item.type === 'video'">
                <video v-if="item.content" :src="item.content" style="width: 100%; min-height: 120px" controls/>
                <media-selector
                    :content="item.content"
                    type="video"
                    @change="itemChange('content', $event)"
                />
            </el-form-item>
            <el-form-item v-if="showIcon" label="图像">
                <el-popover placement="left-end" title="选择图像" trigger="click">
                    <res-selector @itemSelect="itemSelect('icon', $event)"/>
                    <el-button slot="reference">
                        <img v-if="item.icon" :src="'/api' + item.icon" width="100%">
                        <div v-if="!item.icon">选择图片</div>
                    </el-button>
                </el-popover>
            </el-form-item>
            <el-form-item label="初始显示">
                <el-switch
                    :value="item.display"
                    active-text="显示"
                    inactive-text="隐藏"
                    @input="itemChange('display', $event)"
                ></el-switch>
            </el-form-item>
            <el-form-item
                label="标题"
                v-if="activedEditor !== 'apps' && ['window', 'app', 'input'].some(v => v === item.type)"
            >
                <el-input :value="item.title" @input="itemChange('title', $event)"></el-input>
            </el-form-item>
            <el-form-item label="大小位置" v-if="showPos">
                <el-input
                    type="number"
                    :value="item.w"
                    @input="itemChange('w', Number($event))"
                    placeholder="宽"
                    style="width: 48%"
                ></el-input>
                <el-input
                    type="number"
                    :value="item.h"
                    @input="itemChange('h', Number($event))"
                    placeholder="高"
                    style="width: 48%"
                ></el-input>
                <el-input
                    type="number"
                    :value="item.x"
                    @input="itemChange('x', Number($event))"
                    placeholder="X"
                    style="width: 48%"
                ></el-input>
                <el-input
                    type="number"
                    :value="item.y"
                    @input="itemChange('y', Number($event))"
                    placeholder="Y"
                    style="width: 48%"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="内容"
                v-if="['app', 'list', 'input', 'window', 'select', 'label'].some(v => v === item.type)"
            >
                <!-- <el-popover placement="left" title="内容" width="600" trigger="click">
                    <editor :key="`editor_${item.name}_${item.type}`" v-model="item.content"></editor>
                    <el-button slot="reference">富文本编辑</el-button>
                </el-popover>-->
                <el-input
                    type="textarea"
                    autosize
                    :value="item.content"
                    @input="itemChange('content', $event)"
                    :rows="3"
                ></el-input>
            </el-form-item>
            <el-form-item label="控件背景" v-if="activedEditor === 'apps'">
                <div class="block">
                    <el-color-picker v-model="backgroundColor" @change="itemChange('backgroundColor', $event)"></el-color-picker>
                </div>
            </el-form-item>
            <el-form-item label="控件字体" v-if="activedEditor === 'apps'">
                <div class="block">
                    <el-input-number size="mini" v-model="fontSize" @change="itemChange('fontSize', $event)"></el-input-number>
                </div>
            </el-form-item>
            <el-form-item label="组件属性" v-if="false && activedEditor === 'apps'">
                 <div class="block">
                    <el-input
                        type="textarea"
                        autosize
                        :value="JSON.stringify(item.props, null, 2)"
                        @input="itemChange('props', $event)"
                        :rows="3"
                    ></el-input>
                </div>
            </el-form-item>
        </el-form>
        <h4 v-if="item.type !== 'app'">事件</h4>
        <el-collapse v-model="eventType" accordion>
            <el-collapse-item
                title="点击事件"
                name="点击事件"
                v-if="!['input', 'app', 'select', 'video'].some(v => v === item.type)"
            >
                <event-config
                    key="event-onClick"
                    :items="items"
                    name="onClick"
                    :item="item"
                    update="updateActivedItem"
                />
            </el-collapse-item>
            <el-collapse-item
                title="拖拽事件"
                name="拖拽事件"
                v-if="!item.type || item.type === 'desktopItem'"
            >
                <event-config
                    key="event-onDrag"
                    :items="items"
                    name="onDrag"
                    :item="item"
                    update="updateActivedItem"
                />
            </el-collapse-item>
            <el-collapse-item
                title="结果验证"
                name="结果验证"
                v-if="!item.type || ['list', 'desktopItem', 'input', 'select', 'video', 'fixedItem', 'floatItem'].some(v => v === item.type)"
            >
                <event-config
                    key="event-onChange"
                    :items="items"
                    name="onChange"
                    :item="item"
                    update="updateActivedItem"
                />
            </el-collapse-item>
        </el-collapse>
        <div v-if="item.uid" style="text-align: center; padding-top: 10px">
            <el-popover placement="left" width="160" v-model="confirmDel">
                <p>确定删除此物品/组件吗？</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="confirmDel = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="itemDel">确定</el-button>
                </div>
                <el-button slot="reference" type="danger">删除物品/组件</el-button>
            </el-popover>
        </div>
    </span>
</template>
<script>
import Vue from 'vue'
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import vueTrix from 'vue-trix'
import resSelector from './resSelector'
import eviSelector from './eviSelector'
import mediaSelector from './mediaSelector'
import eventConfig from './eventConfig'
import { itemTypes, htmlTypes } from '../data/consts'

export default {
    name: 'item-config',
    components: {
        'res-selector': resSelector,
        'event-config': eventConfig,
        'evi-selector': eviSelector,
        'media-selector': mediaSelector,
        editor: vueTrix
    },
    data() {
        return {
            itemTypes,
            htmlTypes,
            confirmDel: false,
            eventType: '点击事件',
            backgroundColor: null,
            fontSize: 12
        }
    },
    watch: {
        activedItem() {
            const props = this.activedItem.props ? this.activedItem.props : {}
            const style = props.style ? props.style : {}
            this.backgroundColor = style.backgroundColor
            this.fontSize = style.fontSize ? style.fontSize.replace('px', '') : '0'
        }
    },
    computed: {
        ...mapState('course', ['activedEditor', 'activedItem', 'activedApp', 'counter', 'apps', 'business']),
        item() {
            return this.activedItem
        },
        items() {
            if (this.activedEditor === 'apps') {
                if (this.activedApp) {
                    const activedApp = this.apps.find(app => app.name === this.activedApp)
                    if (activedApp) {
                        return activedApp.items
                    } else {
                        return []
                    }
                } else {
                    return []
                }
            } else {
                return this.counter.items.concat(this.business.scripts)
            }
        },
        showIcon() {
            return ['fixedItem', 'floatItem', 'image'].some(v => this.item && v === this.item.type)
        },
        showPos() {
            if (this.item && this.item.type === 'fixedItem') {
                return true
            } else {
                return false
            }
        },
        itemNamesOptions() {
            if (this.activedEditor === 'apps') {
                return this.counter && Array.isArray(this.counter.items)
                    ? this.counter.items.map(item => item.name)
                    : []
            } else {
                let items = []
                if (this.counter && Array.isArray(this.counter.items)) {
                    items = [...items, ...this.counter.items]
                }
                if (this.business && Array.isArray(this.business.scripts)) {
                    items = [...items, ...this.business.scripts]
                }
                return items.reduce((last, curr) => {
                    if (last.indexOf(curr.name) < 0) {
                        last.push(curr.name)
                    }
                    return last
                }, [])
            }
        }
    },
    methods: {
        itemSelect(key, item) {
            Vue.set(this.item, key, item.fileUrl)
            this.$store.commit('course/updateActivedItem', this.item)
        },
        itemChange(key, value, item) {
            if (!this.activedItem) return
            if (key === 'name') {
                this.copyItemByName(value, item)
            }
            if(key == 'fontSize') {
              const props = this.item.props ? this.item.props : {}
              const oldStyle = props.style ? props.style : {}
              const style = { ...oldStyle, ...{ fontSize: `${value}px` } }
              Vue.set(this.item, 'props', { ...props, ...{ style }})
            }
            if(key == 'backgroundColor') {
              const props = this.item.props ? this.item.props : {}
              const oldStyle = props.style ? props.style : {}
              const style = { ...oldStyle, ...{ backgroundColor: value } }
              Vue.set(this.item, 'props', { ...props, ...{ style } })
            }
            Vue.set(this.item, key, key === 'props' ? JSON.parse(value || {}) : value)
            this.$store.commit('course/updateActivedItem', this.item)
        },
        copyItemByName(name, item) {
            const items = [...this.counter.items, ...this.business.scripts]
            for (const it of items) {
                if (it.name === name && it.type && !item.type) {
                    const { uid, ...others } = it
                    Object.assign(item, others)
                }
            }
        },
        itemDel() {
            this.confirmDel = false
            this.$store.commit('course/delActivedItem')
        }
    }
}
</script>
<style lang="less">
</style>

